<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-font.css"/>
		<style type="text/css">
			.inpcss{
				width: 100%;
				padding: 0.4em;
				margin: 0.3em 0;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.inpcss label{
			    width: 30%;
			    margin-bottom: 0;
			    padding-left: 0;
			    border: 0;
			}
			.inpcss input{
			    width: 50%;
			    margin-bottom: 0;
			    padding-left: 0;
			    border: 0;
			}
			.inpcss button{
			    width: 20%;
			}
			.content{
				width: 90%;
				margin: 1em auto;
			}
			.clist{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.ctext{
				padding: 0.5em 1.5em;
				text-align: center;
				margin: 0.5em;
				background-color: white;
				border-radius: 10px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">商品分类管理</h1>
		</header>
		<div class="mui-content">
		    <div class="inpcss">
		    	 <label>商品分类</label>
		    	 <input type="text" maxlength="10" id="ivalue" placeholder="输入商品分类">
		         <button type="button" class="mui-btn mui-btn-blue" id="sub">添加</button>
		    </div>
		    <div class="content">
		    	我的分类 <span class="fe08">(点击删除)</span>：
		    	<div class="clist" id="clist">
			    	
		    	</div>
		    </div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				getclist();
				document.getElementById("sub").addEventListener("tap",function(e){
					var value = document.getElementById("ivalue").value;
					if(value == null || value == ""||value == " "){
						console.log("输入空");
						mui.toast("请输入商品分类");
					}else{
						console.log(value);
						var data = {url:"/api/product_sort/add",data:{access_token:acctoken(),name:value}}
						ajax(data,function(res){
							g("ivalue").value = "";
							getclist();
						})
					}
					
				});
				
			}
			function getclist(){
				var data = {
					url:"/api/product_sort/lst",
					data:{access_token:acctoken()}
				}
				ajax(data,function(res){
					console.log(res);
					var str = "";
					if(res.data.length>0){
						for(var i = 0; i < res.data.length; i++){
							str += '<div class="ctext fe09" onclick="delc('+res.data[i].id+')">'+
								res.data[i].name+
								'</div>';
						}
						g("clist").innerHTML = str;
					}else{
						g("clist").innerHTML = '<div class="nolistdiv">暂无分类</div>';
					}
				})
			}
			function delc(cid){
				var btnArray = ['否', '是'];
			    mui.confirm('是否确认删除？', '', btnArray, function(e) {
			        if (e.index == 1) {
			        	var data = {
			        		url:"/api/product_sort/del",
			        		data:{access_token:acctoken(),id:cid}
			        	}
			            ajax(data,function(res){
			            	mui.toast(res.msg);
			            	getclist();
			            })
			        }
			    })
			}
		</script>
	</body>

</html>